<template>
    <detail-dialog-panel v-bind="$attrs" v-on="$listeners" :no-button="true" :title="showTitle" :size="showWorkFlow?'large':'medium'">
        <el-tabs tab-position="left" v-bind="$attrs" v-on="$listeners" class="detail-tab"
                 v-model="activeName">
            <el-tab-pane label="概况" name="first" :key="1">
              <div class="content">
                <div style="flex: 1; overflow-y: auto; padding:0 20px">
                  <slot :data="row"></slot>
                </div>
                <center-block v-if="!model&&showWorkFlow" class="right-block" title="流程">
                  <right-steps :row="row" :is-all="false" :showActiveBtn="showActiveBtn"></right-steps>
                </center-block>
              </div>
            </el-tab-pane>
            <slot name="otherItem" :data="row">
            </slot>
          <el-tab-pane label="动态" name="third" v-if="showWorkFlow&&flowInfo.show_flow" :key="4">
            <top-step :row="row"  direction="vertical"></top-step>
          </el-tab-pane>
          <el-tab-pane label="流程图" :lazy="true" name="forth" v-if="showWorkFlow&&flowInfo.show_flow"  :key="5">
<!--            <process :id="row.workflow"></process>-->
          </el-tab-pane>
          <el-tab-pane label="流程" v-if="model&&showWorkFlow" name="fifth" :key="2">
            <div style="overflow-y: scroll;height: 100%;">
              <right-steps :row="row" :is-all="true"></right-steps>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div slot="right" v-if="showWorkFlow">
            <active-button v-if="showActiveBtn" :row="row"></active-button>
            <dispatch-button :row="row" v-if="params.category == 'jiedan'" ></dispatch-button>
            <slot name="moreBtn"></slot>
            <back-button  v-if="showActiveBtn" :row="row"></back-button>
            <square-button title="切换模式" icon="el-icon-guide" @click="changeModel"></square-button>
            <suggestion-button  v-if="showActiveBtn"></suggestion-button>
        </div>
    </detail-dialog-panel>
</template>
<script>
    import DetailDialogPanel from "./Case/DetailDialogPanel";
    import SquareButton from "./Case/SquareButton";
    import RightSteps from "./Case/RightSteps";
    import CenterBlock from "./Case/CenterBlock";
    import ActiveButton from "./Case/ActiveButton";
    import SuggestionButton from './Case/SuggestionButton'
    import BackButton from './Case/Buttons/BackButton'
    import TopStep from "../../views/workManagement/components/topStep";
    import Process from "../../views/workManagement/components/process";
    import DispatchButton from "@/components/WorkFlowsDialog/Case/Buttons/dispatchButton";
    export default {
        name: "WorkflowSimpleDetailDialog",
        components: {
          DispatchButton,
          Process,
          TopStep,
          BackButton,
          SuggestionButton,
            ActiveButton,
            CenterBlock, RightSteps, SquareButton, DetailDialogPanel
        },
        provide(){
          return {
            fullDialog:true,
            realPath:this.path
          }
        },
        props: {
            params:{
              type: Object,
              default: function () {
                return {}
              }
            },
            row: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            showActiveBtn: {
                type: Boolean,
                default: false
            },
            showModel:{
                type:Boolean,
                defalut:false
            },
            title:{
              type:String,
              default:""
            }
        },
        computed: {
            showTitle(){
              return this.title?this.title:"查看-"+this.row.title
            },
            showWorkFlow() {
                return this.row.ticket
            },
            flowInfo(){
              return this.$store.getters.flowInfo
            }
        },
        data() {
            return {
                current_state_id: "",
                activeName: "first",
                model:false
            };
        },
        created() {
          if (this.showWorkFlow) {
            this.getDetailInfo()
          }
            this.model = this.showModel

        },
        methods: {
            changeModel() {
                this.model = !this.model
            },
          getDetailInfo() {
            this.$store.dispatch("workManagement/getWorkInfo",this.row)
          },
        }
    };
</script>
<style lang="scss" scoped>
    @import "../../assets/styles/workflow";
</style>
